/**
 * Created by fengliu on 15/8/28.
 */
'use strict';
import React from 'react';
import jQuery from 'jquery';
import AMUIRect from 'amazeui-react';
var Container = AMUIRect.Container;
var Nav = AMUIRect.Nav;
var NavItem = AMUIRect.NavItem;
var Breadcrumb = AMUIRect.Breadcrumb;
var Sticky = AMUIRect.Sticky;
var Icon = AMUIRect.Icon;
// import 'amazeui/js/amazeui';

import Logo from './Left/Logo';
import NavBar from './Left/NavBar';

module.exports = React.createClass({
    render(){
      return <Sticky top={20}><header className="header">
              <Logo />
                <NavBar />
                <Linker />
                <LoginBlock />
                <button className="am-btn am-btn-success" data-am-offcanvas="{target: '#doc-oc-demo3'}">右侧显示边栏</button>
                <div id="doc-oc-demo3" className="am-offcanvas">
                    <div className="am-offcanvas-bar am-offcanvas-bar-flip">
                        <div className="am-offcanvas-content">
                            <p>
                                我不愿让你一个人 <br/>
                                承受这世界的残忍 <br/>
                                我不愿眼泪陪你到 永恒 <br/>
                            </p>
                            <p><a url="http://music.163.com/#/song?id=385554" target="_blank">网易音乐</a></p>
                        </div>
                    </div>
                </div>
                </header></Sticky>
    }
});

var Linker = React.createClass({
    render(){
        return <Breadcrumb>
            <Breadcrumb.Item href="http://blog.hainuo.info">微博</Breadcrumb.Item>
            <Breadcrumb.Item href="http://blog.hainuo.info">RSS</Breadcrumb.Item>
            <Breadcrumb.Item href="http://blog.hainuo.info">微信</Breadcrumb.Item>
        </Breadcrumb>
    }
});

var LoginBlock = React.createClass({
    render(){
        var Grid = AMUIRect.Grid;
        var Col = AMUIRect.Col;

        return <div className="loginIcon">
            <Grid>
                <Col sm={6} md={6}>
                    <Icon button href="http://blog.hainuo.info" amSize="sm" icon="user"> 登陆</Icon>
                </Col>
                <Col sm={6} md={6}>
                    <Icon button href="http://blog.hainuo.info" amSize="sm" icon="user-plus"> 注册</Icon>
                </Col>
            </Grid>
        </div>
    }
});
